<%--
  Created by IntelliJ IDEA.
  User: 26520
  Date: 2024/11/21
  Time: 13:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>customSystem</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="cindex" class="cindex">
    <h1 style="text-align: center;color: white;margin-bottom: 35px">岚精灵信息管理系统</h1>
    <h1 style="text-align: center;color: white;margin-bottom: 35px">这是修改主页</h1>
<%--    搜索框--%>
    <div style="margin-bottom: 40px;">
<%--        这里的键盘事件，由于使用了Element-ui，需要加上.native进行限制，因为在Element-ui中对active进行了封装，需要加上native进行限制--%>
        <el-input placeholder="请输入学生名称" v-model="search" class="input-with-select" @keyup.enter.native="search_ks">
            <el-select v-model="select" slot="prepend" placeholder="请选择">
                <el-option label="模糊查询" value="1"></el-option>
                <el-option label="准确查询" value="2"></el-option>
            </el-select>
            <el-button @click="search_ks" slot="append" icon="el-icon-search"  @keyup.enter.native="search_ks"></el-button>
        </el-input>
    </div>
<%--    内容展示框--%>
    <el-table height="550"
              :data="tableData"
              style="width: 100%"
              :row-class-name="tableRowClassName"
              cell-class-name="table-cell-center"
              :default-sort = "{prop: 'orderdatetime', order: 'descending'}">
        <el-table-column
                width="70"
                prop="id"
                label="id"
                sortable>
        </el-table-column>
        <el-table-column
                prop="name"
                label="学生名称"
                sortable>
        </el-table-column>
        <el-table-column

                prop="company"
                label="学生学校">
        </el-table-column>
        <el-table-column
                width="90"
                prop="role"
                label="信息类别">
        </el-table-column>
        <el-table-column
                prop="imgurl"
                label="年级">
        </el-table-column>
        <el-table-column
                prop="jlurl"
                label="班级">
        </el-table-column>
        <el-table-column
                width="150"
                prop="birthday"
                label="学生生日"
                sortable>
        </el-table-column>
        <el-table-column
                width="110"
                prop="gender"
                label="学生性别"
                sortable>
        </el-table-column>
        <el-table-column
                prop="tel"
                label="联系方式">
        </el-table-column>


        <el-table-column label="操作" width="150">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>

    </el-table>
    <div class="dibu_button">
        <el-row style="display: inline-block">
            <el-button type="primary" plain @click="addcustom">添加学生</el-button>
        </el-row>
        <el-row style="display: inline-block; margin-left: 30px">
            <el-button type="info" plain @click="go_out">退出系统</el-button>
        </el-row>
    </div>

    <%--    这里开始编辑弹窗--%>
    <%--    删除弹窗--%>
    <el-dialog
            title="删除客户"
            :visible.sync="deleteVisible"
            width="30%"
            :before-close="handleClose">
        <span>是否确定删除该客户？</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="deleteVisible = false">取 消</el-button>
    <el-button type="primary" @click="deletecustom(),deleteVisible = false">确 定</el-button>
  </span>
    </el-dialog>

<%--    编辑客户信息--%>
    <el-dialog title="编辑学生信息" :visible.sync="editVisible">
        <el-form ref="form" :model="form" :label-position="right" label-width="80px" action="">
            <el-form-item label="姓名">
                <el-input v-model="form.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="学校">
                <el-input v-model="form.company"></el-input>
            </el-form-item>
            <el-form-item label="年级">
                <el-input v-model="form.imgurl"></el-input>
            </el-form-item>
            <el-form-item label="班级">
                <el-input v-model="form.jlurl"></el-input>
            </el-form-item>
            <el-form-item label="类别">
                <el-input v-model="form.role"></el-input>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        style="width: 100%"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="性别">
                <el-select style="width: 100%" v-model="form.gender" placeholder="请选择">
                    <el-option
                            v-for="item in genderchange"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="form.tel"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editVisible = false">取 消</el-button>
            <el-button type="primary" @click="editcustom(),editVisible = false">修 改</el-button>
        </div>
    </el-dialog>


<%--    客户订单列表--%>
    <el-dialog title="订单列表" :visible.sync="ddlistVisible">
        <el-table :data="ddlist" :default-sort = "{prop: 'orderdatetime', order: 'descending'}">
            <el-table-column property="orderid" label="订单编号(Order ID)"></el-table-column>
            <el-table-column property="ordernum" label="订单金额(RMB)" sortable></el-table-column>
            <el-table-column property="orderdatetime" label="下单时间(TIME)" sortable></el-table-column>
        </el-table>
    </el-dialog>

    <%--    新增信息--%>
    <el-dialog title="新增订单" :visible.sync="newddVisible">
        <el-form ref="newddform" :model="newddform" :label-position="right" label-width="80px" action="">
            <el-form-item label="金额">
                <el-input v-model="newddform.ordernum"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="newddVisible = false">取 消</el-button>
            <el-button type="primary" @click="newdd(),newddVisible = false">新 增</el-button>
        </div>
    </el-dialog>

</div>




</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#cindex',
        data: function() {
            return {
                search: '',
                // 这里默认情况下是模糊查询
                select: '1',
                tableData: [],
                changeid:"",
                indexnum:"",
                editVisible: false,
                deleteVisible: false,
                ddlistVisible:false,
                newddVisible:false,
                form: {
                    name: '',
                    company:"",
                    role:"",
                    birthday:"",
                    gender:"",
                    tel:""
                },
                genderchange: [{
                    value: '男',
                    label: '男'
                }, {
                    value: '女',
                    label: '女'
                }, {
                    value: '其他',
                    label: '其他'
                }],
                ddlist:[],
                newddform:{
                    customid:"",
                    ordernum:""
                }

            }

        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            downloadFile(fileName) {
                console.log(fileName)
                const fileUrl = fileName; // 文件的URL地址
                window.open(fileUrl);
            },
            handleEdit(index, row) {
                this.changeid = row.id;
                this.editVisible = true;
                this.indexnum = index;
                this.form.name = this.tableData[index].name;
                this.form.company = this.tableData[index].company;
                this.form.role = this.tableData[index].role;
                this.form.birthday = this.tableData[index].birthday;
                this.form.gender = this.tableData[index].gender;
                this.form.tel = this.tableData[index].tel;
                console.log(index, row.id);
            },
            handleDelete(index, row) {
                this.changeid = row.id;
                this.deleteVisible = true;
                console.log(index, row.id);
            },
            handledd(index, row){
                this.ddlistVisible = true;
                fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/selectorderlistBycustomid?customid=' + row.id, {
                    method: 'POST', // 设置请求方法为 POST
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.ddlist = data;
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                    });

            },
            handlenewdd(index, row){
                this.newddform.customid = row.id;
                this.newddVisible = true;

            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            addcustom(){
                this.$message.warning("加载中！");
                // 跳转到指定的URL
                setTimeout(() => {
                    window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/goaddcustom';
                }, 300);
            },
            fetchData() {
                fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/selectAllCustomList', {
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {
                        this.tableData = data;
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                    });
            },
            search_ks(){
                // 实现点击查询功能,先判断是模糊查询还是准确查询，查询出来的数据保存在tableData[]中
                //模糊查询
                if (this.search === ""){
                    this.$message.error("请输入需要查询的客户姓名！")
                }else {
                    if (this.select === "1"){
                        fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/selectCustomLikeName?CustomName=' + this.search, {
                            method: 'POST', // 设置请求方法为 POST
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok ' + response.statusText);
                                }
                                return response.json();
                            })
                            .then(data => {
                                this.$message.success("查询成功！")
                                this.tableData = data;
                            })
                            .catch(error => {
                                console.error('There has been a problem with your fetch operation:', error);
                            });
                    }else if (this.select === "2") {
                        fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/selectCustomByName?CustomName=' + this.search, {
                            method: 'POST', // 设置请求方法为 POST
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                            .then(response => {
                                if (!response.ok) {
                                    throw new Error('Network response was not ok ' + response.statusText);
                                }
                                return response.json();
                            })
                            .then(data => {
                                this.$message.success("查询成功！")
                                this.tableData = data;
                            })
                            .catch(error => {
                                console.error('There has been a problem with your fetch operation:', error);
                            });
                    }
                }
            },
            go_out(){
                this.$message.success("退出成功！")
                setTimeout(() => {
                    window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/';
                }, 300);
            },
            deletecustom(){
                fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/deleteCustomByid?id=' + this.changeid, {
                    method: 'POST', // 设置请求方法为 POST
                    headers: {
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Network response was not ok ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {

                        this.$message.success("删除成功！")
                        setTimeout(() => {
                            window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/customIndex';
                        }, 300);
                    })
                    .catch(error => {
                        console.error('There has been a problem with your fetch operation:', error);
                    });
            },
            checkForm() {
                let allFilled = true;
                for (let key in this.form) {
                    if (!this.form[key] && this.form[key] !== 0) { // 假设0是一个有效的值
                        allFilled = false;
                        break;
                    }
                }
                return allFilled;
            },
            editcustom(){
                if (!this.checkForm()) {
                    this.$message.error("请填写所有必填字段");
                    return;
                }
                if (this.form.birthday instanceof Date) {
                    // 格式化生日日期为 yyyy-mm-dd
                    // this.form.birthday = this.form.birthday ? this.form.birthday.toISOString().split('T')[0] : '';

                    // 获取年、月、日
                    const year = this.form.birthday.getFullYear();
                    const month = (this.form.birthday.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以加1
                    const day = this.form.birthday.getDate().toString().padStart(2, '0');

                    // 格式化生日日期为 yyyy-mm-dd
                    this.form.birthday = year+"-"+month+"-"+day;
                }


                // 创建URLSearchParams对象并添加数据
                const params = new URLSearchParams();
                params.append('name', this.form.name);
                params.append('company', this.form.company);
                params.append('role', this.form.role);
                params.append('birthday', this.form.birthday);
                params.append('gender', this.form.gender);
                params.append('tel', this.form.tel);
                console.log(params);
                // 发送POST请求
                fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/editcustom', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                    },
                    body: params // URLSearchParams对象会自动转换为URL编码的字符串
                })
                    .then(response => {
                        if (response.ok) {
                            return response.text(); // 或者 response.json() 如果响应是JSON格式
                        }
                        throw new Error('Network response was not ok.');
                    })
                    .then(data => {
                        console.log(data);
                        this.$message.success("用户信息修改成功！");
                        setTimeout(() => {
                            window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/customIndex';
                        }, 300); // 1000毫秒等于1秒
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        this.$message.error("数用户信息修改失败！");
                    });
            },
            newdd(){
                if (this.newddform.customid === ""){
                    this.$message.error("请填写所有必填字段");
                }else {
                    const params = new URLSearchParams();
                    params.append('customid', this.newddform.customid);
                    params.append('ordernum', this.newddform.ordernum);

                    fetch('http://localhost:8090/Spring_MVC_class9_war_exploded/addorder', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                        },
                        body: params // URLSearchParams对象会自动转换为URL编码的字符串
                    })
                        .then(response => {
                            if (response.ok) {
                                return response.text(); // 或者 response.json() 如果响应是JSON格式
                            }
                            throw new Error('Network response was not ok.');
                        })
                        .then(data => {
                            console.log(data);
                            this.$message.success("订单添加成功！");
                            setTimeout(() => {
                                window.location.href = 'http://localhost:8090/Spring_MVC_class9_war_exploded/customIndex';
                            }, 300); // 1000毫秒等于1秒
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            this.$message.error("订单添加失败！");
                        });

                }
            }
        },
        created() {
            this.fetchData(); // 当组件创建后调用 fetchData 方法
        },
    })
</script>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #9CFE;
    }
    .cindex{
        width: 85%;
        padding-top: 45px;
        text-align: center;
        margin: 0 auto;
    }
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #e6e5e6;
    }
    .el-table .warning-row {
        background: #fbf7f7;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
    .dibu_button{
        width: 100%;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
    }
</style>
</html>
